<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/head :: htmlhead">
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">藏品——<a th:text="${name}"></a></div>
                <div class="layui-card-body">
                    <table id="info_table" lay-filter="info_table"></table>
                    <script type="text/html" id="table_toolbar">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm" lay-event="addCangpin">添加藏品</button>
                        </div>
                    </script>
                    <script type="text/html" id="table_operate">
                        <a class="layui-btn layui-btn-xs" lay-event="xiangqing">详情</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
    <!--添加藏品弹框-->
    <div class="site-text" style="margin: 5%; display: none" id="addCP">
        <div class="layui-form" action="" lay-filter="addform">
            <div class="layui-form-item">
                <label class="layui-form-label">藏品名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入藏品名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">主题类型</label>
                <div class="layui-input-block">
                    <input type="text" name="theme" lay-verify="required" autocomplete="off" placeholder="请输入藏品主题类型" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">详细信息</label>
                <div class="layui-input-block">
                    <textarea name="des" lay-verify="required" autocomplete="off" placeholder="请输入藏品详细信息" class="layui-textarea"></textarea>
                </div>
            </div>
            <input type="hidden" name="picid" id="picid" class="image">
            <div class="layui-form-item">
                <label class="layui-form-label ">藏品图片</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="CPpicture">上传图片</button>
                    </div>
                    <p id="demoText"></p>
                </div>
            </div>

            <div class="layui-form-item" hidden>
                <input type="text" name="bwgid" lay-verify="required" class="layui-input" th:value="${bwgid}">
            </div>
            <div class="layui-form-item" hidden>
                <div class="layui-input-block">
                    <button id="addcangpinsubmit" class="layui-btn" lay-submit lay-filter="addCangpin">
                        保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!--藏品详情弹框-->
    <div class="site-text" style="margin: 5%; display: none" id="CPxiangqing">
        <div class="layui-form" action="" lay-filter="addform">
            <div class="layui-form-item">
                <label class="layui-form-label">藏品名称</label>
                <div class="layui-input-block">
                    <input type="text" id="name_xq" lay-verify="required" class="layui-input" disabled="disabled">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">主题类型</label>
                <div class="layui-input-block">
                    <input type="text" id="theme_xq" lay-verify="required" class="layui-input" disabled="disabled">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">详细信息</label>
                <div class="layui-input-block">
                    <textarea id="des_xq" lay-verify="required" autocomplete="off" disabled="disabled" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label ">藏品图片</label>
                <div class="layui-input-block">
                    <img class="layui-upload-img" id="cppic" style="max-width:100% ;max-height: 100%">
                    <p id="tishi"></p>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
    layui.use(['table','element','form'],function () {
        var table = layui.table
            ,element = layui.element
            ,form = layui.form;

        table.render({
            elem: '#info_table'
            ,url: '/getinfo/cangpin?bwgid='+[[${bwgid}]]
            ,method : 'post'
            ,toolbar: '#table_toolbar'
            ,defaultToolbar: ['filter', 'print']
            ,cellMinWidth: 80
            ,page: true
            ,cols: [
                [
                    {type:'checkbox', fixed: 'left'},
                    {field: 'id', title: 'ID'},
                    {field: 'name', title: '藏品名称'},
                    {field: 'theme', title: '主题类型'},
                    {field: 'des', title: '描述'},
                    {fixed: 'right', title:'操作', toolbar: '#table_operate', width:'20%'}
                ]
            ],done:function () {
                $("[data-field='id']").css('display','none');
            }
        });

        table.on('tool(info_table)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确定删除此藏品信息？删除后不可恢复！', function(index){
                    $.ajax({
                        url:"/deleteinfo/cangpin",
                        async: false,
                        type:"POST",
                        dataType: "text",
                        data:data,
                        success: function(data){
                            if(data==="error"){
                                layer.msg('删除失败！', {icon: 2});
                                layer.close(index);
                            }else if(data==="success"){
                                layer.msg('删除成功！', {icon: 1});
                                location.reload()
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if(obj.event === 'xiangqing'){
                layer.open({
                    type: 1
                    ,skin: 'layui-layer-molv'
                    ,area: ['50%', '80%']
                    ,title: ['藏品详情','font-size:18px']
                    ,btn: ['返回']
                    ,shadeClose: true
                    ,shade: 0 //遮罩透明度
                    ,maxmin: true //允许全屏最小化
                    ,content:$("#CPxiangqing")  //弹窗路径
                    ,success:function(layero,index){
                        var cppic = $("#cppic");
                        $("#name_xq").attr("value",data.name);
                        $("#theme_xq").attr("value",data.theme);
                        $("#des_xq").text(data.des);
                        cppic.attr("src",data.picid);
                    }
                    ,btn2 : function(index, layero) { // 取消按钮回调函数
                        layer.close(index); // 关闭弹出层
                    }
                });

            }
        });

        table.on('toolbar(info_table)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            if(obj.event === 'addCangpin'){
                layer.open({
                    type: 1
                    ,skin: 'layui-layer-molv'
                    ,area: ['60%', '70%']
                    ,title: ['添加藏品','font-size:18px']
                    ,btn: ['确定', '取消']
                    ,shadeClose: true
                    ,shade: 0 //遮罩透明度
                    ,maxmin: true //允许全屏最小化
                    ,content:$("#addCP")  //弹窗路径
                    ,success:function(layero,index){
                        form.render(null, 'addform');
                    }
                    ,yes : function(index, layero) { // 确认按钮回调函数
                        form.on('submit(addCangpin)', function(data) {
                            $.ajax({
                                url:"/addCangpin",
                                async: false,
                                type:"POST",
                                dataType: "text",
                                data:data.field,
                                success: function(aa){
                                    if(aa==="error"){
                                        layer.msg('添加失败！', {icon: 2});
                                        layer.close(index);
                                    }else if(aa==="success"){
                                        layer.msg('添加成功！', {icon: 1});
                                        location.reload()
                                    }
                                }
                            });
                            return false;
                        });
                        $('#addcangpinsubmit').click();
                    }
                    ,btn2 : function(index, layero) { // 取消按钮回调函数
                        layer.close(index); // 关闭弹出层
                    }
                });

            }
        });


    });

    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#CPpicture'
            ,url: '/uploadCPpicture'
            ,accept:'images'
            ,size:50000
            ,done: function(res){
                //如果上传失败
                if(res.data.indexOf("Error") !== -1){
                    this.error(index, upload);
                }else{
                    //上传成功
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #4cae4c;"><a href="'+res.data+'">'+res.data+'</a></span>');
                    var fileupload = $("#picid");
                    fileupload.attr("value",res.data);
                    layer.msg('图片上传成功！', {icon: 1});
                }
            }
            ,error: function(){
                layer.msg('图片上传失败！', {icon: 2});
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });


    });
</script>
</body>
</html>